<template>
  <div class="person">
    <h1>情况一：监视ref定义的基本类型</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">sum+1</button>
    <hr>
    <h1>情况二：监视ref定义的对象类型</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changePerson">改人</button>
    <hr>
    <h1>情况三：监视reactive定义的对象类型</h1>
    <h2>man姓名:{{ man.name }}</h2>
    <h2>man年龄:{{ man.age }}</h2>
    <button @click="changeManName">改man名字</button>
    <button @click="changeManAge">改man年龄</button>
    <button @click="changeMan">改man</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    // watch只能监视以下四种数据：
    // ref定义的数据
    // reactive定义的数据
    // 函数返回的值
    // 包含上述内容的数组

    // 情况一
    import {ref,reactive,watch} from 'vue'
    let sum = ref(0)
    function changeSum(){
        sum.value += 1
    }
    const stopWatch = watch(sum,(n,o)=>{
        console.log('sum变化',n,o);
        if(n>=10){
            stopWatch()
        }
    })

    // 情况二
    let person = ref({name:'张三',age:18})
    function changeName(){
        person.value.name += '~';
    }
    function changeAge(){
        person.value.age += 1
    }
    function changePerson(){
        person.value = {name:'李四',age:90}
    }
    watch(person,(n,o)=>{
        // console.log('person变化了',n,o);
    },{deep:true,immediate:true})


    // 情况三
    let man = reactive({name:'张三',age:18})
    function changeManName(){
        man.name += '~';
    }
    function changeManAge(){
        man.age += 1
    }
    function changeMan(){
        Object.assign(man,{name:'李四',age:90}) 
    }
    watch(man,(n,o)=>{
        console.log('man变化了',n,o);
    })

</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px
    }
    li{
        font-size: 20px;
    }
</style>